<template>
  <div class="process-steps-container">
    <el-steps :active="activeStep" finish-status="success" align-center>
      <el-step
        v-for="(step, index) in steps"
        :key="index"
        :title="step.stepName"
        :description="step.processorName"
        :status="getStepStatus(step)"
      >
        <template #icon>
          <el-icon v-if="step.status === 'completed'" color="#67c23a">
            <Check />
          </el-icon>
          <el-icon v-else-if="step.status === 'rejected'" color="#f56c6c">
            <Close />
          </el-icon>
          <el-icon v-else-if="step.status === 'pending'" color="#909399">
            <Clock />
          </el-icon>
        </template>
      </el-step>
    </el-steps>
    
    <!-- 步骤详情 -->
    <div class="steps-details" v-if="showDetails && steps.length > 0" style="margin-top: 20px;">
      <el-timeline>
        <el-timeline-item
          v-for="(step, index) in steps"
          :key="index"
          :timestamp="step.processTime ? formatTime(step.processTime) : ''"
          :color="getTimelineColor(step)"
          :icon="getTimelineIcon(step)"
        >
          <el-card shadow="hover" class="step-detail-card">
            <div class="step-header">
              <span class="step-title">{{ step.stepName }}</span>
              <el-tag :type="getTagType(step)" size="small">
                {{ getStatusText(step) }}
              </el-tag>
            </div>
            <div class="step-content">
              <div class="step-info">
                <span class="label">处理人:</span>
                <span class="value">{{ step.processorName }}</span>
              </div>
              <div class="step-info" v-if="step.comment">
                <span class="label">处理意见:</span>
                <span class="value">{{ step.comment }}</span>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { Check, Close, Clock, User } from '@element-plus/icons-vue';

interface ProcessStep {
  stepOrder: number;
  stepName: string;
  processorName: string;
  result: boolean;
  comment: string;
  processTime: string;
  status: 'completed' | 'pending' | 'rejected';
}

const props = defineProps<{
  steps: ProcessStep[];
  showDetails?: boolean;
}>();

const activeStep = computed(() => {
  const completedSteps = props.steps.filter(step => step.status === 'completed');
  return completedSteps.length;
});

const getStepStatus = (step: ProcessStep) => {
  if (step.status === 'completed') return 'finish';
  if (step.status === 'rejected') return 'error';
  return 'wait';
};

const getTimelineColor = (step: ProcessStep) => {
  if (step.status === 'completed') return '#67c23a';
  if (step.status === 'rejected') return '#f56c6c';
  return '#909399';
};

const getTimelineIcon = (step: ProcessStep) => {
  if (step.status === 'completed') return Check;
  if (step.status === 'rejected') return Close;
  return Clock;
};

const getTagType = (step: ProcessStep) => {
  if (step.status === 'completed') return 'success';
  if (step.status === 'rejected') return 'danger';
  return 'info';
};

const getStatusText = (step: ProcessStep) => {
  if (step.status === 'completed') return '已完成';
  if (step.status === 'rejected') return '已拒绝';
  return '待处理';
};

const formatTime = (time: string) => {
  const date = new Date(time);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};
</script>

<style lang="scss" scoped>
.process-steps-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.steps-details {
  .step-detail-card {
    margin-bottom: 0;
    
    .step-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .step-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }
    
    .step-content {
      .step-info {
        display: flex;
        margin-bottom: 8px;
        
        .label {
          color: #909399;
          margin-right: 8px;
          min-width: 80px;
        }
        
        .value {
          color: #303133;
          flex: 1;
        }
      }
    }
  }
}

:deep(.el-timeline-item__timestamp) {
  color: #909399;
  font-size: 12px;
}

:deep(.el-timeline-item__icon) {
  width: 20px;
  height: 20px;
}
</style>